<template>
    <div>
        <!-- 标签数据列表 -->
        <div class="table-box">
        <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :tableLoading="listLoading"
        >
            <template slot="codes" slot-scope="scope">
                <div class="codes">
                    <span>{{ scope.row.code }}</span>
                    <img
                        v-if="currentRow.isOnline == 1"
                        src="@/assets/image/online.png"
                        alt=""
                    />
                    <img v-else src="@/assets/image/offline.png" alt="" />
                </div>
            </template>
            <template slot="action" slot-scope="scope">
                <el-button v-permission="['om:tag:disassociation']"
                    type="danger"
                    size="mini"
                    @click="handleDelete(scope.row)"
                    >解除关联</el-button
                >
            </template>
        </Table>
    </div>
        <pagination
            v-if="total > 0"
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="getEquipTagData"
        />
    </div>
</template>

<script>
import { equipment } from "@/api/factuer";
import Table from "@/components/Table";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

import { handleConfirm } from "@/utils/messageBox";

export default {
    components: {
        Table,
        Pagination,
    },
    props: {
        equipTagVisible: {
            type: Boolean,
            default: false,
        },
        currentRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            tableData: [],
            tableHeader: [
                {
                    type: "index",
                    label: "序号",
                    width: "60",
                    fixed: true,
                },
                {
                    label: "id",
                    prop: "id",
                },
                { slot: "codes", label: "设备编码", width: "220" },
                {
                    label: "最近上线时间",
                    prop: "lastOnlineTime",
                    width: "80",
                },
                {
                    label: "最近下线时间",
                    prop: "lastOfflineTime",
                    width: "80",
                },
                { slot: "action", label: "操作", width: "120" },
            ],
            listLoading: false,
            total: 0,
            searchForm: {
                pageNum: 1,
                pageSize: 15,
            },
        };
    },
    watch: {
        equipTagVisible: {
            handler(val) {
                if (val) {
                    this.getEquipTagData();
                } else {
                    this.tableData = [];
                    this.total = 0;
                    this.searchForm = {
                        pageNum: 1,
                        pageSize: 15,
                    };
                    this.listLoading = false;
                }
            },
            immediate: true,
        },
    },
    methods: {
        getEquipTagData() {
            this.listLoading = true;
            equipment(
                `/tag/equips/${this.currentRow.id}`,
                "post",
                this.searchForm
            )
                .then((res) => {
                    this.tableData = res.data;
                    this.total = +res.total;

                    this.searchForm.pageNum = +res.pageNum;
                })
                .finally(() => (this.listLoading = false));
        },
        handleDelete(row) {
            handleConfirm("删除标签与设备的关联，确定继续？", "warning", "提示")
                .then((res) => {
                    this.doDelete(row);
                })
                .catch((err) => {});
        },
        doDelete(row) {
            equipment(`/tag/${row.id}/${this.currentRow.id}`, "delete").then(
                (res) => {
                    if (res.code == 200) {
                        this.$message.success(res.message);
                        this.getEquipTagData();
                    }
                }
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.pagination-container {
    padding: 16px 0;
}
img {
    width: 20px;
    margin-left: 10px;
    position: relative;
    top: 4px;
}
</style>
